<template>
  <!--
    action: 上传服务器的接口地址 => 需要完成手动上传的整个过程
    show-file-list 是否显示已上传文件列表
    before-upload 上传文件之前的钩子 => 上传前文件检验 文件体积 类型
  -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload"
  >

    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'

export default {
  // data() {
  //   return {
  //     // 这个数据放在组件内部合适?????
  //     imageUrl: 'https://img1.360buyimg.com/da/jfs/t1/316792/15/19670/8718/6888ffb9F1b747f76/a84389ac98825e6f.png'
  //   }
  // },
  // value由于是双绑的  所以想更新直接触发input事件
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    upload(obj) {
      // obj 上传对象
      // obj.file 选中的文件
      // 这里自定义上传过程
      const cos = new COS({
        SecretId: 'AKID1ub3GExRgoobGinnZ6OZVCerrdASWLBp',
        SecretKey: 'UjliW5RaVEiy1qRowqY2IRO6dFh2NXUE'
      }) // 后续上传图片到存储桶的cos实例
      // console.log(cos.putObject)
      // 对象存储 按照键值存储
      cos.putObject({
        Bucket: 'hr-sass-7-1304657626', // 存储桶名称
        Region: 'ap-shanghai', // 地域名称
        Key: obj.file.name, // 文件名称
        Body: obj.file // 文件对象
      }, (err, data) => {
        // 上传结束(成功/ 失败)后 会执行这里
        // err 如果失败了 给你err 原因
        // data 如果成功了 就是成功后的数据
        if (err) {
          console.log(err)
          return
        }
        console.log('上传成功了', data)

        this.$emit('input', 'http://' + data.Location) // 回传给父组件
        this.$message.success('上传成功')
      }) // cos不支持promise
    },
    beforeAvatarUpload(file) {
      // file 选中的文件  对其校验即可
      // 注意: 返回 false 或者返回 Promise 且被 reject，则停止上传
      console.log('上传之前先来这里校验', file)

      const isJPG = file.type === 'image/jpeg' // 文件类型是否是jpg
      const isLt2M = file.size / 1024 / 1024 < 2 // 文件体积是否超过2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M // 能够上传的条件是  jpg且小于2M
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

